﻿<%@ page session="false" language="java" contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include.inc.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>温湿度</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" href="${contextPath}/resources/assets/css/bootstrap.css" />
	<link rel="stylesheet" href="${contextPath}/resources/assets/css/font-awesome.css" />
	<link rel="stylesheet" href="${contextPath}/resources/assets/css/ace-fonts.css" />
	<link rel="stylesheet" href="${contextPath}/resources/assets/css/jquery-ui.css" />
	<link rel="stylesheet" href="${contextPath}/resources/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
	<script src="${contextPath}/resources/assets/js/jquery.js"></script>
	<script src="${contextPath}/resources/assets/js/ace-extra.js"></script>
	<style>
	    .wrapper{
                width:960px;
                height: 594px;
                margin:0 auto;
        }
	</style>
  </head>
  
  <body body="no-skin" style="background:white;">
  	<div class="wrapper">
            <div class="widget-box">
                <!-- <div class="widget-header">
                    <h3 class="widget-title">
                                                        温湿度计
                    </h3>

                    <div class="widget-toolbar">
                        <a href="#" data-action="close">
                            <i class="ace-icon fa fa-times" style="line-height:35px;"></i>
                        </a>
                    </div>
                </div> -->

                <div class="widget-body">
                    <div class="widget-main">
                        <div class="top-part">
                            <div style="width:30%;height:40%;float:left;margin-left:10%;">
                                <img src="${contextPath}/resources/Picture/xunkong/sbtb/wsdy.png" style="width:80%;height:80%;margin:10%;">
                            </div>
                            <div style="width:40%;height:40%;margin-left:45%;font-size:18px;font-family:'微软雅黑';font-weight:bold;line-height:22px;border:1px dashed #DBDBDB;">
                                <p style="width:100%;height:100%;padding:5%">
                                    <span>名称:工业级温湿度监控仪</span><br/>
                                    <span>设备编号:<span id="deviceCode">WSDY(N10)-01</span></span><br/>
                                    <span>供应商:xxxxx</span><br/>
                                    <span>型号:APTX-4876</span><br/>
                                    <span>采购时间:2016年8月14日</span><br/>
                                    <span>质保时间:2年</span><br/><br/>
                                    <span>保养周期:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="interval"></span>天</span><br/>
                                    <span>上次保养时间:&nbsp;&nbsp;&nbsp;<span id="lasttime"></span></span>
                                </p>
                            </div>
                        </div>
                        <hr/>
                        <div class="bottom-part">
                            <div style="width:40%;height:40%;float:left;font-size:25px;margin-left:20px;padding:30px;font-family:'微软雅黑';font-weight:bold;line-height:40px">
                                <span style="margin:0 25px;">工作状态:&nbsp;&nbsp;&nbsp;<span style="color:green;font-weight:bold;font-size:32px">正常</span></span><br/>
                                <span style="margin:0 25px;">当前温度:&nbsp;&nbsp;&nbsp;<span style="color:green;font-weight:bold;font-size:32px" id="wendu"></span>&#8451</span><br/>
                                <span style="margin:0 25px;">当前湿度:&nbsp;&nbsp;&nbsp;<span style="color:green;font-weight:bold;font-size:32px" id="shidu"></span>%</span>
                            </div>
                            <div style="width:45%;height:40%;margin-left:45%;font-size:15px;">
<!--                                <span style="margin:0 25px;">工作状态:<span>正常</span></span><span style="margin:0 25px;">当前湿度:<span>20</span>%</span>-->
                                <span style="font-family:'微软雅黑';font-weight:bold;font-size:18px">选择时间:</span><input type="button" id="datepick" style="border:none;font-weight:normal;background-color:white;">
                                <div id="TH-chart" style="width:90%;height:80%;"></div>
                            </div>
                        </div>
                    </div><!-- /.widget-main -->
                </div><!-- /.widget-body -->
            </div>
        </div>
  <script src="${contextPath}/resources/assets/js/ace/ace.js"></script>      
  <script src="${contextPath}/resources/assets/js/bootstrap.js"></script>      
  <script src="${contextPath}/resources/assets/js/jquery-ui.js"></script>      
  <script src="${contextPath}/resources/js/Highcharts-4.2.5/js/highcharts.js"></script>
  <script>
  (function(){
	  //
	  var Tdata=[];
	  var Hdata=[];
	  var deviceCode=$("#deviceCode").html();
	  //当前时间格式化
	  var today=new Date();
	  var Mtoday=today.getMonth()+1;
	  var Dtoday=today.getDate();
	  var Ytoday=today.getFullYear();
	  var MMtoday=(new String(Mtoday).length==1?("0"+Mtoday):Mtoday);
	  var DDtoday=(new String(Dtoday).length==1?("0"+Dtoday):Dtoday);
	  
	  var options={
			  credits:{
		          enabled:false
		      },
		      title:{
		          text:'温湿度'
		      },
		      xAxis:{
		          categories:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
		      },
		      yAxis:[{
		          title:{
		              text:"温度",
		          },
		          labels:{
		              format:'{value}°C'
		          }
		      },{
		          opposite:true,
		          title:{
		              text:"湿度",
		          },
		          labels:{
		              format:'{value}%'
		          }
		      }],
		      series:[{
		          name:"温度",
		          data:Tdata,
		          tooltip:{
		              valueSuffix:"°C"
		          },
		          marker:{
		              radius:0
		          },
		      },{
		          name:"湿度",
		          data:Hdata,
		          yAxis:1,
		          tooltip:{
		              valueSuffix:"%"
		          },
		          marker:{
		              radius:0
		          },
		      }]
	  }
	  for(var j=0;j<24;j++){
		  Tdata.push(Math.round(Math.random()*200)/10+20);
	  }
	  for(var i=0;i<24;i++){
	      Hdata.push(Math.round(Math.random()*200)/10+40);
	  }
	  loaddata();
	  setInterval(loaddata,3000);
	  //获取保养信息
	  $.ajax({
			type:"post",
			async:true,
			url:"../loadInfo?DeviceCode="+deviceCode,
			success:function(data){
				$("#interval").html(data[0].interval);
				$("#lasttime").html(data[0].lastTime);
			}
		 });	  
	  $("#TH-chart").highcharts(options);
	  
	  $("#datepick").attr("value",MMtoday+"/"+DDtoday+"/"+Ytoday);
	  $("#datepick").datepicker({
	      showOtherMonths: true,
		  selectOtherMonths: false,
	  });
	  $("#datepick").change(function(){
		  //重新获取TH数据
		  /* Tdata.length=0;
	      Hdata.length=0;
	      for(var j=0;j<24;j++){
	          Tdata.push(Math.round(Math.random()*200)/10+20)
	      }
	      for(var i=0;i<24;i++){
	          Hdata.push(Math.round(Math.random()*200)/10+40);
	      } */
	      /*$("#TH-chart").highcharts().series[1].data[23].update(Tdata[12]);*/
	      //修改表
	      updateTHValue();
	      /* var chart=$("#TH-chart").highcharts();
	      chart.series[1].update({
	          data:Hdata,
	      });
	      chart.series[0].update({
	          data:Tdata,
	      }) */
	  })
	  $("#datepick").trigger("change");
	  //获取TH数据
	  function updateTHValue(){
		  $.ajax({
			  type:'post',
 			  url:encodeURI('../loadDataHistory?device=温度&date='+$("#datepick")[0].value),
 			  success:function(data){
				  Tdata.length=0;
				  options.xAxis.categories.length=0;
				  console.log("success");
				  for(var d in data){
					  Tdata[d]=parseInt(data[d].value*100)/100;
				  	  var xaxis=data[d].time.split(":")[0];
				  	  options.xAxis.categories[d]=(xaxis[0]==0?xaxis[1]:xaxis);
				  	  /* options.xAxis.categories[d]=data[d].time; */
				  }
 				  $("#TH-chart").highcharts(options);
			  },
			  error:function(){
				  console.log("failed");
			  }
		  });
		  $.ajax({
			  type:'post',
 			  url:encodeURI('../loadDataHistory?device=湿度&date='+$("#datepick")[0].value),
 			  success:function(data){
				  Hdata.length=0;
				  /* options.xAxis.categories.length=0; */
				  console.log("success");
				  for(var d in data){
					  Hdata[d]=parseInt(data[d].value*100)/100;
					  var xaxis=data[d].time.split(":")[0];
				  	  options.xAxis.categories[d]=(xaxis[0]==0?xaxis[1]:xaxis);
				  	  /* options.xAxis.categories[d]=data[d].time; */
				  };
				  $("#TH-chart").highcharts(options);
		  		},
			  error:function(){
				  console.log("failed");
			  }
		  });
	  };
	  function loaddata(){
               $.ajax({
			url:"../loadData",
			cache:false,
			async:false,
			success:function(result){
				for(var i=0;i<result.length;i++){
					if(result[i].opcname=="DEMO.temp1"){
						$("#wendu").html(Math.round(result[i].opcvalue*100)/100);
					}
					if(result[i].opcname=="DEMO.wet1"){
						$("#shidu").html(Math.round(result[i].opcvalue*100)/100);
					}
				}
			}
	       })
	  }
  }())
</script>
</body>
</html>
